<template>
  <div class="booking-home">
    <!-- 英雄区域 -->
    <div class="hero-section">
      <div class="carousel-container" ref="carouselRef">
        <!-- 轮播图内容 -->
        <div class="carousel-track" :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
          <div class="carousel-slide" v-for="(image, index) in carouselImages" :key="index">
            <img 
              :src="image.src" 
              :alt="image.alt"
              class="carousel-image"
              @load="onImageLoad"
              @error="onImageError"
            />
          </div>
        </div>
        <div class="carousel-dots">
          <span 
            v-for="(_, index) in carouselImages" 
            :key="index"
            :class="['dot', { active: currentSlide === index }]"
            @click="goToSlide(index)"
          ></span>
        </div>
        <!-- 标题覆盖层 -->
        <div class="title-overlay">
          <div class="main-title">
            <h1>《永恒的高迪·圣家堂》</h1>
            <h2>华南师范大学美术学院</h2>
            <p class="creators-credit">A collective VR experience by Stéphane Landowski & Gaël Cabouat</p>
          </div>
          <div class="exhibition-info">
            <span class="exhibition-period">展览时间：2025.06.25 - 2025.07.22</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 滚动通知 -->
    <div class="notice-banner">
      <div class="notice-icon">📢</div>
      <div class="notice-content">
        <div class="scrolling-text">
          {{ noticeText }}
        </div>
      </div>
    </div>



    <!-- 展馆概念 -->
    <div class="concept-section">
      <div class="section-header">
        <h3>展馆概念</h3>
        <p>探索高迪建筑艺术的永恒魅力</p>
      </div>
      
      <!-- 概念图片内容 -->
      <div class="concept-grid">
        <div class="concept-item" v-for="(concept, index) in conceptImages" :key="index">
          <div class="concept-image">
            <img 
              :src="concept.src" 
              :alt="concept.title"
              class="concept-img"
              @load="onImageLoad"
              @error="onImageError"
            />
            <div class="concept-overlay">
              <h4>{{ concept.title }}</h4>
              <p>{{ concept.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

        

    <!-- 展馆信息 -->
    <div class="museum-info">
      <div class="info-grid">
        <!-- 左侧信息 -->
        <div class="info-left">
          <div class="info-block">
            <h4>🕐 开放时间</h4>
            <p>每周一至周日 09:00～22:00</p>
            <p class="sub-text">22:00停止入场</p>
          </div>
          
          <div class="info-block">
            <h4>📍 展馆地址</h4>
            <p>广州市天河区中山大道西55号</p>
            <p class="sub-text">华南师范大学石牌校区美术学院</p>
          </div>
          
          <div class="info-block">
            <h4>🌐 官方网站</h4>
            <p>https://art.scnu.edu.cn</p>
          </div>
          
          <div class="info-block">
            <h4>📞 联系我们</h4>
            <p>+86 13392633089</p>
            <p class="sub-text">预约咨询：9:00-22:00</p>
          </div>
        </div>
        
        <!-- 右侧地图 -->
        <div class="info-right">
          <div class="map-container">
            <div class="map-placeholder">
              <div class="map-icon">🗺️</div>
              <h4>展馆位置</h4>
              <p>华南师范大学 · 石牌校区</p>
              <p>美术学院美术楼1楼</p>
              <div class="map-directions">
                <div class="direction-item">
                  <span class="transport-icon">🚇</span>
                  <span>地铁三号线华师站B出口</span>
                </div>
                <div class="direction-item">
                  <span class="transport-icon">🚌</span>
                  <span>公交华师站/师大暨大站</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 立即预约按钮 -->
    <div class="booking-button-section">
      <el-button type="primary" size="large" @click="goToBooking" class="main-booking-btn">
        立即预约体验
      </el-button>
      <p class="booking-hint">免费预约，先到先得</p>
    </div>

    <!-- 系统升级通知弹窗 -->
    <el-dialog
      v-model="systemNoticeVisible"
      width="90%"
      class="system-notice-dialog"
      :show-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="notice-content">
        <div class="notice-icon">
          ⚠️ 系统升级通知
        </div>
        <div class="notice-text">
          <p>由于设备调试原因，展馆开放时间调整如下：</p>
          <div class="time-change">
            <div class="time-item old-time">
              <span class="label">原定时间：</span>
              <span class="date">2025年6月19日 - 7月19日</span>
            </div>
            <div class="arrow">↓</div>
            <div class="time-item new-time">
              <span class="label">调整后：</span>
              <span class="date">2025年6月25日 - 7月22日</span>
            </div>
          </div>
          <div class="important-notice">
            <p><strong>📢 重要提醒：</strong></p>
            <ul>
              <li>已预约6月25日前场次的用户，请重新预约！</li>
              <li>系统已自动取消6月25日前的所有预约</li>
              <li>给您带来的不便，我们深表歉意</li>
            </ul>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="closeSystemNotice" size="large">
            我知道了
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage, ElDialog } from 'element-plus'

// 轮播图数据 - 直接使用优化后的图片
const carouselImages = ref([
  {
    src: new URL('@/assets/images/HomePicture.jpg', import.meta.url).href,
    title: '圣家堂主殿',
    description: '探索高迪建筑的神圣空间',
    alt: '圣家堂主殿'
  },
  {
    src: new URL('@/assets/images/WorkingRoomGaudi.jpg', import.meta.url).href,
    title: '高迪工作室',
    description: '感受大师的创作空间',
    alt: '高迪工作室'
  },
  {
    src: new URL('@/assets/images/AtelierAvatars.jpg', import.meta.url).href,
    title: '建筑工坊',
    description: '体验建筑艺术的诞生过程',
    alt: '建筑工坊'
  },
  {
    src: new URL('@/assets/images/ForestAvatars.jpg', import.meta.url).href,
    title: '森林教堂',
    description: '沉浸在自然与建筑的完美融合',
    alt: '森林教堂'
  }
])

// 展馆概念图片 - 直接使用优化后的图片
const conceptImages = ref([
  {
    src: new URL('@/assets/images/concepts/Gaudi_nef.jpg', import.meta.url).href,
    title: '圣家堂中殿',
    description: '感受神圣建筑的宏伟与庄严'
  },
  {
    src: new URL('@/assets/images/concepts/GaudiWorkingRoom.jpg', import.meta.url).href,
    title: '大师工作室',
    description: '探索高迪的创作灵感与工艺传承'
  },
  {
    src: new URL('@/assets/images/concepts/Foret_Cathedrale.jpg', import.meta.url).href,
    title: '森林大教堂',
    description: '体验自然与建筑艺术的完美结合'
  },
  {
    src: new URL('@/assets/images/concepts/Gaudi_Reserve.jpg', import.meta.url).href,
    title: '高迪珍藏',
    description: '欣赏建筑大师的珍贵作品与设计手稿'
  }
])

// 当前轮播图索引
const currentSlide = ref(0)
const carouselRef = ref(null)
let carouselTimer = null

// 滚动通知文本
const noticeText = ref('建议您优先选择绿色出行方式，为确保美术馆的观展环境舒适，请提前预约参观时间。展览期间请保持安静，感谢您的配合！')

// 系统通知弹窗
const systemNoticeVisible = ref(false)

// 轮播图自动播放
const startCarousel = () => {
  carouselTimer = setInterval(() => {
    currentSlide.value = (currentSlide.value + 1) % carouselImages.value.length
  }, 1800)
}

const stopCarousel = () => {
  if (carouselTimer) {
    clearInterval(carouselTimer)
    carouselTimer = null
  }
}

const goToSlide = (index) => {
  currentSlide.value = index
  stopCarousel()
  setTimeout(startCarousel, 5000) // 5秒后重新开始自动播放
}

// 跳转到预约页面
const emit = defineEmits(['switchTab'])

const goToBooking = () => {
  emit('switchTab', 'gallery')
}

// 简化的图片加载事件处理
const onImageLoad = () => {
  console.log('图片加载完成')
}

const onImageError = () => {
  console.error('图片加载失败')
}

// 关闭系统通知
const closeSystemNotice = () => {
  systemNoticeVisible.value = false
  // 记录用户已经看过通知，避免重复弹出
  localStorage.setItem('systemNoticeShown_20250622', 'true')
}

// 检查是否需要显示系统通知
const checkSystemNotice = () => {
  const hasShown = localStorage.getItem('systemNoticeShown_20250622')
  if (!hasShown) {
    // 延迟显示弹窗，给用户一点时间适应页面
    setTimeout(() => {
      systemNoticeVisible.value = true
    }, 500)
  }
}



onMounted(() => {
  // 页面加载后立即开始轮播
  setTimeout(startCarousel, 500)
  
  // 检查是否需要显示系统通知
  checkSystemNotice()
})

onUnmounted(() => {
  stopCarousel()
})
</script>

<style scoped>
@import '../assets/css/booking/home.css';
</style> 